02. Pass Data Into Components With Props

Passing Data With Props

You'll be needing this contacts array in the following video:

const contacts = [
 {
   "id": "karen",
   "name": "Karen Isgrigg",
   "handle": "karen_isgrigg",
   "avatarURL": "http://localhost:5001/karen.jpg"
 },
 {
   "id": "richard",
   "name": "Richard Kalehoff",
   "handle": "richardkalehoff",
   "avatarURL": "http://localhost:5001/richard.jpg"
 },
 {
   "id": "tyler",
   "name": "Tyler McGinnis",
   "handle": "tylermcginnis",
   "avatarURL": "http://localhost:5001/tyler.jpg"
 }
];

This contacts array is just temporary. Eventually, we'll be retrieving and storing contacts on our backend server. As of right now, though, we don't know how or where to make network requests. We'll get to this soon, so just stick with this static list of contacts for now.

Apps Are Running?

To follow along, make sure that both your Contacts app and the backend server are running.

Create The ListContacts Component

QUIZ QUESTION::

Match the following items with their respective concept:

ANSWER CHOICES:



Concept

Item

functions

components
SOLUTION:

Concept

Item

functions

components

Pass Value Into A Component?

If there were a <Clock /> component in an app you're building, how would you pass a currentTime prop into it?
SOLUTION: ``

Displaying The Contact Names

Access Data In A Component?

Using the <Clock /> component example:

<Clock currentTime='3:41pm' />

How would you access the value 3:41pm from inside the component?
SOLUTION: this.props.currentTime

Add Contact Details

If you're following along on your own machine and the avatar images are not loading for you, check that the server is running.

Passing data with props problem set

How do you pass multiple props individually to a component?
SOLUTION: ``

Passing Data With Props Recap

A prop is any input that you pass to a React component. Just like an HTML attribute, a prop name and value are added to the Component.

// passing a prop to a component
<LogoutButton text='Wanna log out?' />

In the code above, text is the prop and the string 'Wanna log out?' is the value.

All props are stored on the this.props object. So to access this text prop from inside the component, we'd use this.props.text:

// access the prop inside the component
...
render() {
 return <div>{this.props.text}</div>
}
...

Further Research

Next Concept